<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <title></title>
</head>
<script src="js/serverUrl.js"></script>
<script src="js/vue.js"></script>
<script src="js/mint.js"></script>
<script src="js/moment.js"></script>
<style type="text/css">
        .container{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .dataContainer{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100vw;
        }
        .typeContainer{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 90vw;
            background-color: white;
            height: 12vw;
            border-radius: 2vw;
            margin-top: 2.5vh;
            box-shadow:2px 2px #D3D3D3;
            z-index: 5;
        }
        .typeImg{
            height: 8vw;
            width: 8vw;
            margin-right: 4vw;
        }
        .typeName{
            font-size: 4vw;
        }
        .subContainer{
            display: grid;
            padding-top: 3vw;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            width: 90vw;
            margin-top: -5px;
            background-color: white;
            box-shadow:2px 2px #D3D3D3;
            border-bottom-left-radius: 2vw;
            border-bottom-right-radius: 2vw;
            margin-bottom: 3vw;
        }
        .subType{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 25vw;
        }

        .subtypeImg{
            width: 10vw;
            height: 10vw;
        }
        .subtypeName{
            font-size: 3vw;
            margin-top: 2vh;
        }
    </style>
<body style="background-color: #f4f4f4;">
<div id="app">
    <div class="container">
        <div class="dataContainer" v-for="item in dataList">
            <div class="typeContainer" @click="toQuestion(item.itemId)">
                <img class="typeImg" :src="item.url" />
                <div class="typeName">{{item.name}}</div>
            </div>
            <div class="subContainer" v-if="item.children!=null">
                <div v-for="subItem in item.children" class="subType" @click="toQuestion(subItem.itemId)">
                    <img class="subtypeImg" :src="subItem.url" />
                    <div class="subtypeName">{{subItem.name}}</div>
                </div>
            </div>
        </div>

    </div>
</div>
</body>
<script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data:{
               dataList:[
                  {
                      url:'img/anquan.png',
                      name:'安全题库',
                      itemId:11311,
                      children:[
                          {
                              url:'img/reji.png',
                              name:'热机',
                              itemId:11295,
                          },
                          {
                              url:'img/dianqi.png',
                              name:'电气',
                              itemId:11296,
                          },
                          {
                              url:'img/jikong.png',
                              name:'集控',
                              itemId:11297,
                          },
                          {
                              url:'img/gongdian1.png',
                              name:'供电',
                              itemId:11298,
                          },

                          {
                              url:'img/jiaotonganquan.jpg',
                              name:'交通安全',
                              itemId:11381,
                          },
                          {
                              url:'img/xiaofang.png',
                              name:'消防',
                              itemId:11300,
                          },
                          {
                              url:'img/teshugongzhong.png',
                              name:'特殊工种',
                              itemId:11301,
                          },
                          {
                              url:'img/xinanfa.png',
                              name:'新安法',
                              itemId:11302,
                          }
                      ]
                  },
                  {
                      url:'img/jineng.png',
                      name:'技能鉴定',
                      itemId:11303,
                      children:[
                          {
                              url:'img/2_03.png',
                              name:'第一版',
                              itemId:796,
                          },
                          {
                              url:'img/2_05.jpg',
                              name:'第二版',
                              itemId:11614,
                          },
                          ]

                  },
                  {
                      url:'img/qiye.png',
                      name:'企业题库',
                      itemId:11304,
                      children:[
                          {
                              url:'img/jinneng_logo.png',
                              name:'热力公司',
                              itemId:12164,
                          },
                          {
                              url:'img/jinneng_logo.png',
                              name:'阳泉发电',
                              itemId:12168,
                          },
                          {
                              url:'img/jinneng_logo.png',
                              name:'装备公司',
                              itemId:12170,
                          },
                          {
                              url:'img/jinneng_logo.png',
                              name:'房地产公司',
                              itemId:12182,
                          },
                              {
                              url:'img/jinneng_logo.png',
                              name:'地电公司',
                              itemId:12186,
                          },
                          {
                              url:'img/jinneng_logo.png',
                              name:'大同晋银',
                              itemId:12198,
                          },
                          {
                              url:'img/jinneng_logo.png',
                              name:'龙川公司',
                              itemId:12210,
                          },
                          {
                              url:'img/jinneng_logo.png',
                              name:'售电公司',
                              itemId:12215,
                          },




                          {
                              url:'img/jinneng_logo.png',
                              name:'漳泽发电',
                              itemId:10904,
                          },
                          {
                              url:'img/jinneng_logo.png',
                              name:'蒲洲热电',
                              itemId:10952,
                          },
                          {
                              url:'img/jinneng_logo.png',
                              name:'塔山发电',
                              itemId:10934,
                          },
                          {
                              url:'img/jinneng_logo.png',
                              name:'侯马热电',
                              itemId:11000,
                          },



                          {
                              url:'img/jinneng_logo.png',
                              name:'同华发电',
                              itemId:11087,
                          },
                          {
                              url:'img/jinneng_logo.png',
                              name:'临汾热电',
                              itemId:11183,
                          },
                          {
                              url:'img/jinneng_logo.png',
                              name:'国锦煤电',
                              itemId:11232,
                          },
                          {
                              url:'img/jinneng_logo.png',
                              name:'河津发电',
                              itemId:11268,
                          },
                      ]
                  },
                  {
                      url:'img/fadian.png',
                      name:'发电题库',
                      itemId:11305,
                      children:[
                          {
                              url:'img/2_09.jpg',
                              name:'电气',
                              itemId:11579,
                          },
                          {
                              url:'img/2_11.png',
                              name:'机炉',
                              itemId:11581,
                          },
                          {
                              url:'img/2_13.jpg',
                              name:'热控',
                              itemId:11588,
                          },
                          {
                              url:'img/2_15.jpg',
                              name:'化学',
                              itemId:11589,
                          },
                          {
                              url:'img/2_19.jpg',
                              name:'脱硫',
                              itemId:11590,
                          },
                          {
                              url:'img/2_21.png',
                              name:'输煤',
                              itemId:11591,
                          },
                          {
                              url:'img/2_23.jpg',
                              name:'集控',
                              itemId:11601,
                          },
                          ]
                  },
                  {
                      url:'img/xinnengyuan.png',
                      name:'新能源题库',
                      itemId:11306,
                      children:[
                          {
                              url:'img/2_27.png',
                              name:'风机试题',
                              itemId:5364,
                          },
                          {
                              url:'img/2_29.png',
                              name:'燃气轮机试题',
                              itemId:5380,
                          },
                      ]
                  },

                  {
                      url:'img/gongdian.png',
                      name:'供电题库',
                      itemId:11307,
                  },
                  {
                      url:'img/guanli.png',
                      name:'管理题库',
                      itemId:11308,
                  },
                  {
                      url:'img/dangjian.png',
                      name:'党建题库',
                      itemId:11309,
                  },
                  {
                      url:'img/qita.png',
                      name:'其他题库',
                      itemId:11310,
                  },
               ]
            },
          mounted() {
    
          },
		  methods:{
			toQuestion(itemId){
                let params = {
                    questionBankId:itemId
                }
                WebViewJavascriptBridge.callHandler('toQuestion',params,function(response) {
                        
                 });
			}
		  }
		})		
		</script>
</html>
